<template>
	<div>
		<Header title="商品编码设置"></Header>
		<div class="code">
			<div class="code-l">
				<el-form label-width="100px" class="demo-ruleForm">
					<el-form-item label="编码规则:">
						前缀+顺序号
					</el-form-item>
					<el-form-item label="* 编码位数:">
						<el-select  placeholder="8" v-model="select">
							<el-option label="8" value="8"></el-option>
							<el-option label="9" value="9"></el-option>
							<el-option label="10" value="10"></el-option>
							<el-option label="11" value="11"></el-option>
							<el-option label="12" value="12"></el-option>
							<el-option label="13" value="13"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="编码前缀:">
						<el-radio-group v-model="radio">
							<el-radio label="620">
								自定义 <el-input style="width: 130px;" value='620'></el-input>
							</el-radio>
							<br>
							<el-radio label="使用类别前两位(勾选此项时，建档前要先选类别)"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm()">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="code-r">
				<div class="code-header">
					生成代码示例
				</div>
				<div class="code-main">
					<ul>
						<li></li>
						<li>3位前缀</li>
						<li>6位顺序号</li>
					</ul>
					<ul>
						<li>第一个</li>
						<li>620</li>
						<li>000001</li>
					</ul>
					<ul>
						<li>第二个</li>
						<li>620</li>
						<li>000002</li>
					</ul>
					<ul>
						<li>第三个</li>
						<li>620</li>
						<li>000003</li>
					</ul>
					<p>...</p>
					<ul>
						<li>第四个</li>
						<li>620</li>
						<li>000004</li>
					</ul>
				</div>
				<div class="code-footer">
					共可生成999999个商品编码的自编码
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Header from "@/components/goods/header"
export default {
	data() {
      return {
		  select:'',
		  radio:''
      };
    },
    methods: {
      submitForm(formName) {
      }
    },
	components: {
		Header,
	},
}
</script>
<style lang="scss" scoped>
.code{
	width: 1100px;
	margin: 0 auto;
	background-color: #fff;
	margin-top: 10px;
	height: 335px;
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.el-form-item{
		height: 40px;
		.el-radio{
			margin-bottom: 30px;
			margin-left: 20;
		}
		.el-button{
			margin-top: 50px;
		}
	}
	.code-r{
		width: 260px;
		height: 260px;
		box-sizing: border-box;
		border: 1px #ccc dashed;
		.code-header{
			font-size:14px;
			color:#333;
			text-align:center;
			line-height: 40px;
			border-bottom: 1px #ccc dashed;
		}
		.code-main{
			ul{
				list-style: none;
				display: flex;
				justify-content: space-between;
				&:nth-of-type(1){
					color: #333;
					font-weight: bolder;
					li{
						&:nth-of-type(1){
							width:50px
						}
					}
					
				}
				li{
					font-size: 12px;
					text-align: center;
					margin-right: 20px;
				}
			}
		}
		p{
			margin-left: 40px;
		}
		.code-footer{
			color: #333;
			font-weight: bolder;
			font-size:12px;
			text-align: center;
		}
	}
}
</style>
